<template>
  <el-config-provider :locale="locale">
    <div class="app-container">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </el-config-provider>
</template>

<script setup>
import { ref, onMounted } from "vue";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { ElConfigProvider } from "element-plus";
const locale = ref(zhCn);

import Cookies from "js-cookie";
import { clearAllCookies } from "@/utils/cookie.js";
import { getFingerPrint } from "@/utils/fingerprint.js";
import { getProxyIP } from "@/api/index.js";
 

const fp = async () => {
  try {
    if(Cookies.get("_f")) return;
    // 首次调用会自动初始化并获取
    const _fp = await getFingerPrint();
    console.log("fp", _fp, Cookies.get("_f"));
    if (_fp !== Cookies.get("_f")) {
      clearAllCookies();
    }
    Cookies.set("_f", _fp, { expires: 7 });
  } catch (error) {
    console.error(error);
  }
};

const ip = async () => {
  try {
    if(Cookies.get("_i")) return;
    let data = await getProxyIP();
    console.log("ip", data);

    let { query, country, regionName, city, isp, lat, lon, zip } = data;
   Cookies.set("pos",JSON.stringify({ ip:query, country, prov:regionName, city, isp, lat, lng:lon, district:zip }), { expires: 7 });
   Cookies.set("_i",query, { expires: 7 });
  } catch (error) {
    console.error(error);
  }
};

// 2. 关键修改：在 onMounted 里执行异步函数，不阻塞页面渲染
onMounted(async () => {
  // 并行执行两个函数（比 await fp(); await ip() 更快）
  await Promise.all([fp(), ip()]);
});
</script>

<style>
/* 路由过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
